<template>
  <div class="shopSelect">
    <!-- <Navigation></Navigation> -->
    <div class="selectBtn">
      <van-dropdown-menu active-color="#1989fa">
        <!-- 美食下拉框 -->
        <van-dropdown-item :title="this.title1"
                           @click="foodsBtn()">
          <div class="foods">
            <div class="left_lists">
              <div :class="{
                  left_list: true,
                  list: true,
                  selected: selectedIndex == index,
                }"
                   v-for="(item, index) in foodsLists"
                   :key="index"
                   @click="leftListBtn(index)">
                <div>
                  <img :src="
                      'https://fuss10.elemecdn.com/' +
                      item.image_url.substr(0, 1) +
                      '/' +
                      item.image_url.substr(1, 2) +
                      '/' +
                      item.image_url.substr(3) +
                      '.png'
                    "
                       alt="" />{{ item.name }}
                </div>
                <div class="left_list_right">
                  <span>{{ item.count }}</span><i class="iconfont iconjiantou1"></i>
                </div>
              </div>
            </div>
            <div class="right_lists">
              <div :class="{
                  right_list: true,
                  list: true,
                  selected1: selectedIndex1 == index,
                }"
                   v-for="(item, index) in foodList"
                   :key="index"
                   @click="rightListBtn(index)">
                <div>{{ item.name }}</div>
                <div class="left_list_right">
                  <span>{{ item.count }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-dropdown-item>
        <!-- 排序下拉框 -->
        <van-dropdown-item :title="this.title2"
                           v-model="value2"
                           :options="option" />
        <!-- 筛选下拉框 -->
        <van-dropdown-item title="筛选"
                           ref="item">
          <div class="box">
            <div class="part1">
              <p style="fontsize: 12px; margin: 10px">配送方式</p>
              <div class="ways">
                <ul>
                  <li v-for="(item, index) in sendWay"
                      :key="index"
                      @click="sendBtn(index)">
                    <i v-if="item.__v == 0">{{ item.icon_name }}</i><i v-else-if="item.__v == 1"
                       class="iconfont iconduihao"></i>{{ item.text }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="part2">
              <p style="fontsize: 12px; margin: 10px">商家服务</p>
              <div class="serve">
                <ul>
                  <li v-for="(item, index) in shopBinds"
                      :key="index"
                      @click="bindBtn(index)">
                    <i v-if="item.__v == 0">{{ item.icon_name }}</i><i v-else-if="item.__v == 1"
                       class="iconfont iconduihao"></i>
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div style="
              padding: 5px 16px;
              display: flex;
              justifycontent: space-around;
            ">
            <van-button type="danger"
                        block
                        round
                        @click="onCansle()"
                        class="canBtn">
              取消
            </van-button>
            <van-button type="danger"
                        block
                        round
                        @click="onConfirm()"
                        class="conBtn">
              确定({{ this.totalyNum }})
            </van-button>
        <Loading v-if="isloading"></Loading>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="shopLists"
         v-for="(item, index) in lists"
         :key="index"
         @click="ac(index)">
      <ShopList :datas="item"></ShopList>
      
    </div>
  </div>
</template>
<script>
// import vm from "../common/bus";
// import Navigation from "../components/Navigation_comm";
import ShopList from '../components/compoents_B/ShopList_B'
import Loading from "../components/compoents_B/Loading";

export default {
  name: "ShopSelect",
  components: {
    ShopList,
    Loading,
    // Navigation
  },
  data: function () {
    return {
      lists: [],
      tra: null,
      //点击高亮
      selectedIndex: 9,
      selectedIndex1: "",
      //全部
      id: "",
      // 美食
      title1: "美食",
      // 左侧列表数据
      foodsLists: [],
      //右侧列表数据
      foodList: [],
      // 美食筛选最终关键词
      foodsId: "",
      first: "",
      second: "",
      image_url: "",

      // 排序
      title2: "排序",
      option: [
        { text: "智能排序", value: 0 },
        { text: "距离最近", value: 1 },
        { text: "销量最高", value: 2 },
        { text: "起送价最低", value: 3 },
        { text: "配送速度最快", value: 4 },
        { text: "评分最高", value: 5 },
      ],
      value2: "",
      // 筛选
      //选中按钮
      sendWay: [],
      shopBinds: [],
      radio: 1,
      value3: [],
      //数据请求结果
      shopLists: [],
      totalyNum: "",
      isLoading: true,
      // titlts:""
    };
  },
  created () {
    this.isloading = true;
    //console.log(JSON.parse(localStorage.getItem("tra")))
    this.tra = JSON.parse(localStorage.getItem("tra"))
    //console.log(this.tra)
    this.$axios.get("https://elm.cangdu.org/shopping/restaurants", {
      params: {
        latitude: this.tra.latitude,
        longitude: this.tra.longitude,
      }
    }).then(res => {
      this.lists = res;
      // this.tra = JSON.parse(localStorage.getItem("tra"))
      // console.log(tar);
      localStorage.setItem("shop", JSON.stringify(this.list))
      //console.log(JSON.stringify(this.list))
      this.isloading = false;
    }).catch(err => console.log(err))

    //更改导航栏标题
    this.$store.state.title = this.$route.params.title;
    //获取全部店家列表（尚未点击筛选）
    let url1 =
      "https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762";
    this.$axios.get(url1).then((res) => {
      this.shopLists = res;
    });
    // 获取美食下拉框左侧数据
    let url2 = "https://elm.cangdu.org/shopping/v2/restaurant/category";
    this.$axios.get(url2).then((res) => {
      this.foodsLists = res;
    });
    //获取配送方式
    this.$axios
      .get("https://elm.cangdu.org/shopping/v1/restaurants/delivery_modes")
      .then((res) => {
        // console.log(res);
        this.sendWay = res;
      });
    //获取商家活动服务
    this.$axios
      .get("https://elm.cangdu.org/shopping/v1/restaurants/activity_attributes")
      .then((res) => {
        // console.log(res);
        this.shopBinds = res;
      });
  },
  methods: {
    ac (index) {
      localStorage.setItem("shuju", JSON.stringify(this.lists[index].id))
      this.$router.push({ name: 'Shopinfor' });
    },
    leftListBtn (index) {
      this.foodList = this.foodsLists[index].sub_categories;
      console.log(this.foodList);
      this.selectedIndex = index;
    },
    //获取以美食下拉框筛选结果为参数请求数据
    rightListBtn (index) {
      // this.$refs.item.toggle();
      this.selectedIndex1 = index,
        this.foodsId = this.foodList[index].id;
      this.$axios
        .get("https://elm.cangdu.org/shopping/restaurants", {
          params: {
            latitude: this.tra.latitude,
            longitude: this.tra.longitude,
            //餐馆分类ID
            restaurant_category_ids: [this.foodsId],
          },
        })
        .then((res) => {
          console.log(res);
          this.shopLists = res;
        })
        .catch((err) => console.log(err));
      this.title1 = this.foodList[index].name;
    },
    sendBtn (index) {
      if (this.sendWay[index].__v == 0) {
        this.sendWay[index].__v = 1;
      } else {
        this.sendWay[index].__v = 0;
      }
    },
    // 筛选商家服务
    bindBtn (index) {
      // this.value3.push(this.shopBinds[index].id);
      if (this.shopBinds[index].__v == 0) {
        this.shopBinds[index].__v = 1;
        this.value3.push(this.shopBinds[index].id);
        this.value3 = Array.from(new Set(this.value3));
        this.totalyNum = this.value3.length;
        console.log(this.value3);
      } else {
        this.shopBinds[index].__v = 0;
        let innum = this.value3.indexOf(this.shopBinds[index].id);
        if (innum > -1) {
          this.value3.splice(innum, 1);
        }
        console.log(this.value3);
      }
      this.value3 = Array.from(new Set(this.value3));
      this.totalyNum = this.value3.length;
    },
    // 筛选里的取消
    onCansle () {
      this.$refs.item.toggle();
      this.value2 = "";
      this.radio = "";
      this.value3 = "";
      this.shopBinds.__v = 0;
      console.log(this.value3);
    },
    // 筛选里的确定
    onConfirm () {
      console.log(this.foodsId, this.value2, this.radio, this.value3);
      this.$refs.item.toggle();
      this.$axios
        .get("https://elm.cangdu.org/shopping/restaurants", {
          params: {
            latitude: this.tra.latitude,
            longitude: this.tra.longitude,
            //餐馆分类ID
            restaurant_category_ids: [this.foodsId],
            //排序ID
            order_by: this.value2,
            delivery_mode: [this.radio],
            support_ids: this.value3,
          },
        })
        .then((res) => {
          console.log(res);
          this.shopLists = res;
        })
        .catch((err) => console.log(err));
    },
  },
  //监听需要排序的数组的value值
  watch: {
    "value2": {
      handler: function (newV) {
        // console.log(newV);
        this.$axios.get('https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762', {
          params: {
            order_by: newV
          }
        }).then(res => {
          // console.log(res)
          this.lists = res
        }).catch(err => console.log(err));
      },
      deep: true,
      immediate: true
    },
    // "$route.params":{ 
    //   handler:function(newV){
    //     console.log(newV);
    //     console.log(this.$store.state.title);
    //     this.$store.state.title = newV.id;
    //     console.log(this.$store.state.title);
    //   },
    //   deep:true,
    //   immediate:true
    // }

  },
};
</script>
<style lang="less">
.shopSelect {
  .selectBtn {
    .foods {
      width: 375px;
      height: 315px;
      display: flex;
      justify-content: space-between;
      .left_lists {
        background-color: rgba(0, 0, 0, 0.7);
        width: 50%;

        .list {
          background-color: #ddd;
          .left_list_right {
            span {
              font-size: 12px;
              background-color: #bbb;
              padding: 3px 8px;
              border-radius: 5px;
            }
            i {
              font-size: 12px;
              color: #aaa;
            }
          }
        }
        .selected {
          background-color: white;
        }
      }
      .right_lists {
        background-color: white;
        width: 50%;
        .selected1 {
          color: blue;
        }
      }
    }
    .left_lists,
    .right_lists {
      overflow-y: scroll;
      .list {
        width: 100%;
        height: 35px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        box-sizing: border-box;
        img {
          width: 20px;
          height: 20px;
          margin: 0 5px;
        }
        .left_list_right {
          span {
            font-size: 12px;
            padding: 3px 5px;
          }
        }
      }
    }
  }
  .box {
    .radio {
      font-size: 14px;
      margin: 5px 10px;
    }
    .checkBox {
      width: 100px;
      font-size: 14px;
      margin: 5px 10px;
    }
    .ways,
    .serve {
      ul {
        li {
          font-size: 14px;
          width: 100px;
          padding: 5px 5px;
          margin: 5px 10px;
          box-sizing: border-box;
          border: 1px solid black;
          display: inline-block;
          i {
            color: blue;
            margin: 0 5px;
          }
        }
      }
    }
  }
  .canBtn,
  .conBtn {
    height: 35px;
    margin: 10px 10px;
    outline: none;
    border: 0;
    background-color: #ccc;
  }
  .conBtn {
    background-color: #3190e8;
  }
}
</style>